<template>
	<view class="u-page">
		 <view class="goods" v-if="goods.length>0">
			 <view class="imgbox">
				 <image :src="goods[goods_index].goods_img | parseImg" mode="aspectFill"/>
			 </view>
			 <view class="info">
				 <view class="title">{{goods[goods_index].goods_name}}</view>
				 <view class="des">{{goods[goods_index].goods_des}}</view>
				 <view class="price">￥{{spec[spec_index].spec_price}}元/{{spec[spec_index].spec_unit}}</view>
			 </view>
		 </view>
		 <view class="formbox">
			 <view class="item">
			 	<view class="title">选择商品：</view>
			 	<view class="value">
			 		<picker :value="goods_index" :range="goods" range-key="goods_name" @change="changeGoods">
			 			<view class="picker">
			 				<text>{{goods[goods_index].goods_name}}</text>
			 				<u-icon name="arrow-right"></u-icon>
			 			</view> 			
			 		</picker>
			 	</view>				
			 </view>
			 <view class="item">
			 	<view class="title">选择规格：</view>
			 	<view class="value">
			 		<picker :value="spec_index" :range="spec" range-key="spec_name" @change="changeSpec">
			 			<view class="picker">
			 				<text>{{spec[spec_index].spec_name}}</text>
			 				<u-icon name="arrow-right"></u-icon>
			 			</view> 			
			 		</picker>
			 	</view>				
			 </view>
			 <view class="item">
			 	<view class="title">付款方式：</view>
			 	<view class="value">
					<picker :value="pay_index" :range="pay_type" range-key="title" @change="changePay">
						<view class="picker">
							<text>{{pay_type[pay_index].title}}</text>
							<u-icon name="arrow-right"></u-icon>
						</view> 		
					</picker>
			 	</view>
			 </view> 
			 <view class="item">
			 	<view class="title">下单数量：</view>
			 	<view class="value picker">
					<u-number-box buttonSize="24" v-model="formdata.number"></u-number-box>
					<text class="tag-info" style="margin-left: 40rpx;">{{goods[goods_index].spec_unit}}</text>	 		
			 	</view>				
			 </view>
			 <view class="item" v-if="coupon.length>0">
			 	<view class="title">使用卡券：</view>
			 	<view class="value picker">
					<picker :value="coupon_index" :range="coupon" range-key="name" @change="changeCoupon">
						<view class="picker">
							<text>{{coupon[coupon_index].name}}</text>
							<u-icon name="arrow-right"></u-icon>
						</view>		
					</picker> 		
			 	</view>
				<view class="desc" v-if="coupon_index>0">
					<text class="tag-success">{{coupon[coupon_index].desc}}</text>
				</view>
			 </view>
			 <view class="item">
			 	<view class="title">配送地址：</view>
			 	<view class="value picker">
					<picker :value="address_index" :range="customer.address" range-key="detail" @change="changeAddress">
						<view class="picker">
							<text>{{customer.address[address_index].detail}}</text>
							<u-icon name="arrow-right"></u-icon>
						</view>		
					</picker> 		
			 	</view>
			 </view>
			 <view class="item">
			 	<view class="title">配送时间：</view>
			 	<view class="value" style="width: 100%;">
			 		<u-radio-group v-model="formdata.delivery_day">
			 			<view class="radiobox">
			 			<u-radio label="立即" name="0" customStyle="height:60rpx;" :disabled="todaydisabled"></u-radio>
			 			<u-radio label="当日" name="1" customStyle="height:60rpx;" :disabled="todaydisabled"></u-radio>
			 			<u-radio label="次日" name="2" customStyle="height:60rpx;"></u-radio>
			 			<u-radio label="自提" name="3" customStyle="height:60rpx;"></u-radio>
			 			</view>
			 		</u-radio-group>
			 	</view>
			 </view>
			 <view class="item">
			 	<view class="title">下单备注：</view>
			 	<view class="value">
			 		<u-input v-model="formdata.remark"></u-input>
			 	</view>				
			 </view>
			 <view class="submit">
				<u-button type="primary" text="确认下单" @click="submit" :disabled="!pay_type[pay_index].key"></u-button>
			 </view>
		 </view>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/methods.js';
	import {wxpay,inArray} from '@/utils/util.js';
	export default {
		data() {
			return {
				customer:'',
				goods:[],
				goods_index:0,
				spec:[],
				spec_index:0,
				pay_type:[],
				pay_index:0,
				coupon:[],
				coupon_index:0,
				address_index:0,
				formdata:{
					updatetime:'',
					platform:'',
					channel_id:'',
					address_id:'',
					customer_id:'',
					goods_id:'',
					spec_id:'',
					coupon_id:'',
					number:1,
					remark:'',
					delivery_day:'3'
				},
				todaydisabled:false
			}
		},
		onLoad(e) {
			this.getCustomer(e.customer_id);
			this.getCoupon(e.customer_id);
		},
		filters:{
			parseImg:function(e){
				if(!e){
					return baseUrl+'assets/img/logo.png'
				}
				let arr=e.split(',');
				return arr[0];
			}
		},
		methods: {
			...methods,
			getCustomer:function(id){
				this.$get('driver/getCustomerInfo',{
					customer_id:id
				}).then(res=>{
					this.customer=res;
					this.formdata.channel_id=res.channel_id;
					this.formdata.customer_id=res.id;
					this.formdata.updatetime=res.updatetime;
					this.formateGoods();
					this.formatSpec();
					this.formatePay();
					this.formateToday();
				});
			},
			getCoupon:function(id){
				this.$get('driver/coupon',{
					customer_id:id
				}).then(res=>{	
					this.coupon=[{id:0,name:'不使用'},...res];
					if(res.length>0){
						this.coupon_index=1;
					}
				});
			},
			formateGoods:function(){
				let goods=[];
				let goods_id=[];
				for(let i=0;i<this.customer.goods.length;i++){
					let id=this.customer.goods[i].goods_id;
					if(!inArray(goods_id,id)){
						goods.push(this.customer.goods[i]);
						goods_id.push(this.customer.goods[i].goods_id);
					}
				}
				this.goods=goods;
			},
			formatSpec:function(){
				let spec=[];
				let spec_id=[];
				for(let i=0;i<this.customer.goods.length;i++){
					let id=this.customer.goods[i].spec_id;
					let goods_id=this.customer.goods[i].goods_id;
					if(!inArray(spec_id,id) && goods_id==this.goods[this.goods_index].goods_id){
						spec.push(this.customer.goods[i]);
						spec_id.push(this.customer.goods[i].spec_id);
					}
				}
				this.spec=spec;
			},
			changeGoods:function(e){
				this.goods_index=parseInt(e.detail.value);
				this.spec_index=0;
				this.formatSpec();
			},
			changeSpec:function(e){
				this.spec_index=parseInt(e.detail.value);
			},
			changeCoupon:function(e){
				this.coupon_index=parseInt(e.detail.value);
			},
			changeAddress:function(e){
				this.address_index=parseInt(e.detail.value);
			},
			formatePay:function(){
				let pay_type=[];
				if(this.customer.settle_type=='month'){
					pay_type.push({
						key:'month',
						title:'账单月结'
					});
				}
				pay_type.push({
					key:'wechat',
					title:'微信支付'
				});
				pay_type.push({
					key:'delivery',
					title:'货到付款'
				});
				this.pay_type=pay_type;
				this.pay_index=0;
			},
			formateToday:function(){
				let date=new Date();
				let now=parseInt(date.getHours()+''+(date.getMinutes()>=10?date.getMinutes():'0'+date.getMinutes()));	
				let delivery_endtime=parseInt(this.customer.channel.delivery_endtime.replace(':',''));
				if(now>delivery_endtime){
					this.todaydisabled=true;
				}
			},
			changePay:function(e){
				this.pay_index=parseInt(e.detail.value);
			},
			submit:function(){
				let pay_type=this.pay_type[this.pay_index].key;
				let spec_id=this.spec[this.spec_index].spec_id;
				let goods_id=this.goods[this.goods_index].goods_id;
				this.formdata.pay_type=pay_type;
				this.formdata.goods_id=goods_id;
				this.formdata.spec_id=spec_id;
				if(this.coupon_index>0){
					this.formdata.coupon_id=this.coupon[this.coupon_index].id;
				}
				this.formdata.address_id=this.customer.address[this.address_index].id;
				// #ifdef H5
				this.formdata.platform='mp';
				// #endif
				// #ifdef MP-WEIXIN
				this.formdata.platform='miniapp';
				// #endif
				let that=this;
				uni.showModal({
					title:'您确认要下单吗？',
					success: (res) => {
						if(res.confirm){
							that.$post('driver/createOrder',that.formdata,true).then(res=>{
								that.$navigateBack();
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.radiobox{
	width:100%;
	display: flex;
	justify-content: space-between;
	padding: 30rpx 0 0rpx 50rpx;
}
.goods{
	display: flex;
	justify-content: space-between;
	padding: 20rpx;
	background-color: #fff;
	.imgbox{
		width: 40%;	
		image{
			width: 95%;
			height: 210rpx;
		}
	}
	.info{
		width: 60%;	
		height: 210rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		.title{
			font-size: 30rpx;
			color: #272727;
		}
		.des{
			font-size: 26rpx;
			color: #ccb335;
		}
		.price{
			font-size: 30rpx;
			color: #ff0101;
		}
	}
} 
.recharge{
	padding: 10rpx 30rpx;
	padding-left: 70rpx;
}
.formbox{
	width: 95%;
	margin: 20rpx auto;
	margin-top: 0;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 8rpx;
	padding:20rpx 0;
	.submit{
		padding:20rpx;
	}
	.item{
		color: $u-main-color;
		border-radius: 8rpx;
		align-items: center;
		flex-wrap: wrap;
		display: flex;	
		min-height: 70rpx;
		font-size: 30rpx;
		padding:14rpx 20rpx;
		margin-bottom: 10rpx;
		.title{
			text-align: right;
			height: 40rpx;
			line-height: 40rpx;
			width: 30%;		
		}
		.value{
			min-height: 40rpx;
			width: 70%;		
			background-color: #fff;
		}
		.desc{
			display: flex;
			width: 100%;		
			justify-content: flex-end;
			margin-top: 10rpx;
		}
		.picker{
			display: flex;
			justify-content: flex-end;
			align-items: center;	
			flex-wrap: wrap;
			text{
				margin-right: 10rpx;
			}
		}
	}
	.boxinfo{
		padding: 20rpx;
		margin: 0 auto;
	}
}
</style>